﻿@model ProductDetailsModel
@using Nop.Web.Models.Catalog;
@{
    //Html.AddScriptParts("~/Scripts/jquery.refineslide.js");
    //Html.AppendCssFileParts("~/subsites/commerce/Content/styles/refineslide.css");
    Html.AppendCssFileParts("~/subsites/commerce/Content/styles/colorbox.css");
    Html.AddScriptParts("~/Scripts/jquery.colorbox-min.js");
    //int slidecount = 0;
    var i = 0;
    var j = 0;
    var slideCount = Model.PictureModels.Count;
    var productVariant = new ProductDetailsModel.ProductVariantModel();
    if (ViewData.ContainsKey("productVariantId"))
    {
        productVariant = Model.ProductVariantModels.SingleOrDefault(pv => pv.Id == (int)ViewData["productVariantId"]);
        if (productVariant != null && !String.IsNullOrEmpty(productVariant.PictureModel.ImageUrl))
        {
            slideCount += 1;
        }
    }
    //if (ViewData.ContainsKey("addVideo"))
    //{
    //}
}

<div class="product-image-wrapper">
    <div id="carousel-@((int)ViewData["productVariantId"])" class="product-images">
        <div class="carousel-pictures-wrapper">
            <div class="carousel-inner product-picture-list" role="listbox">

                @*@if (productVariant.Id > 0 && productVariant.PictureModel != null && !String.IsNullOrEmpty(productVariant.PictureModel.ImageUrl))
            {
                <div class="item @if (i == 0) {<text>active</text>}" data-thumb="@i">
                    <a class="product-image-slide" href="@productVariant.PictureModel.FullSizeImageUrl"><img src="@productVariant.PictureModel.ImageUrl" alt="@productVariant.PictureModel.AlternateText" title="@productVariant.PictureModel.Title"></a>
                </div>
                i++;
            }*@
                @foreach (var pictureModel in Model.PictureModels)
                {
                    <div class="item @if (i == 0) {<text>active</text>}" data-thumb="@i">
                        <a class="product-image-slide" href="@pictureModel.FullSizeImageUrl"><img src="@pictureModel.FullSizeImageUrl" alt="@pictureModel.AlternateText" title="@pictureModel.Title"></a>
                    </div>
                                     i++;
                }
            </div>
        </div>
        <div class="carousel-thumbs-wrapper @if (Model.PictureModels.Count <= 3) {<text>thumbs-inactive</text> }">
            <div class="carousel-indicators carousel-thumb-indicators product-picture-thumbs">
                @*@if (productVariant.Id > 0 && productVariant.PictureModel != null && !String.IsNullOrEmpty(productVariant.PictureModel.ImageUrl))
                {
                    <li data-target="#carousel-@((int)ViewData["productVariantId"])" data-slide-to="@j" class="thumb"><img src="@productVariant.PictureModel.FullSizeImageUrl" alt="@productVariant.PictureModel.AlternateText" title="@productVariant.PictureModel.Title"></li>
                    j++;
                }*@
                @foreach (var pictureModel in Model.PictureModels)
                {
                    <div data-target="#carousel-@((int)ViewData["productVariantId"])" data-slide-to="@j" class="thumb"><div class="carousel-thumb"><img src="@pictureModel.ImageUrl" alt="@pictureModel.AlternateText" title="@pictureModel.Title"></div></div>
                    j++;
                }
            </div>
        </div>
    </div>

</div>
<script>
    $(".product-images a").colorbox({ rel: "product-images a" });

    $(document).ready(function () {
        $(".product-picture-thumbs").slick({
            infinite: false,
            slidesToShow: 3,
            slidesToScroll: 3,
            prevArrow: "<div class='slick-prev'><i class='fa fa-chevron-left'></i></div>",
            nextArrow: "<div class='slick-next'><i class='fa fa-chevron-right'></i></div>",
        });
        $(".product-picture-list").slick({
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1
        });
        $(".product-picture-thumbs .slick-slide").eq(0).addClass("current");
        $(".product-picture-thumbs .slick-slide").click(function () {
            var index = $(".product-picture-thumbs .slick-slide").index($(this));
            $(".product-picture-list").slick("slickGoTo", index);
            $(".product-picture-thumbs .slick-slide").removeClass("current");
            $(this).addClass("current");
        });
        $(".product-picture-list").on("afterChange", function (e, slick, currentSlide) {
            $(".product-picture-thumbs").slick("slickGoTo", currentSlide);
            $(".product-picture-thumbs .slick-slide").removeClass("current");
            $(".product-picture-thumbs .slick-slide").eq(currentSlide).addClass("current");
        });
    });

</script>